<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo</title>
    <style>
        .todolist-container {
            width: 300px;
            border: 1px solid #ccc;
            padding: 20px;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }

        h3 {
            text-align: center;
            margin-bottom: 20px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 10px;
            background-color: #f2f2f2;
            padding: 10px;
            border-radius: 5px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            margin-left: 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        input[type="text"] {
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        li button{
            float: right;
        }
        .addbtn{
            background-color: #009678;
        }
    </style>
    <script>
        const arr = ['学习英语','学习数学']

        function loadall(){
            const todolist = document.getElementById("todolist")
            todolist.innerHTML = ''
            for (let i = 0; i < arr.length; i++) {
                const item = arr[i]
                // console.log(item)
                const li = `<li>
                                ${item}
                                <button onclick="deleteTodo(${i})">删除</button>
                            </li>`
                todolist.innerHTML += li
            }
        }

        function addTodo(){
            const todoInput = document.getElementById("todo")
            arr.push(todoInput.value)
            todoInput.value = ''

            loadall()
        }

        function deleteTodo(i){
            arr.splice(i,1)

            loadall()
        }

        window.onload = function (){
            loadall()
        }
    </script>
</head>
<body>
    <div class="todolist-container">
        <h3>Todo list</h3>
        <ul id="todolist">
<!--            <li>-->
<!--                学习英语-->
<!--                <button>删除</button>-->
<!--            </li>-->
        </ul>
        <div>
            <input placeholder="添加todo" id="todo"/>
            <button class="addbtn" onclick="addTodo()">添加</button>
        </div>
    </div>
</body>
</html>